<template>

  <div>
 <el-table
     :data="tableData.filter(data => !search || data.userkey_username.toLowerCase().includes(search.toLowerCase()))"
     style="width: 100%"
     v-loading="loading">
     <el-table-column
       label="用户名"
       prop="userkey_username">
     </el-table-column>
     <el-table-column
       label="用户权限"
       prop="userkey_user">

 <template slot-scope="scope">
      {{scope.row.userkey_user?'允许':'不允许'}}
     </template>

     </el-table-column>
     <el-table-column
       label="新闻权限"
       prop="userkey_new">
      <template slot-scope="scope">
           {{scope.row.userkey_new?'允许':'不允许'}}
          </template>
     </el-table-column>
     <el-table-column
       label="修改用户权限"
       prop="userkey_key">
      <template slot-scope="scope">
          {{scope.row.userkey_key?'允许':'不允许'}}
         </template>
     </el-table-column>
     <el-table-column
       align="right">
       <template slot="header" slot-scope="scope">
         <el-input
           v-model="search"
           size="mini"
           placeholder="输入关键字搜索"/>
       </template>
       <template slot-scope="scope">
         <el-button
           size="mini"
           @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
        <!-- <el-button
           size="mini"
           type="danger"
           @click="handleDelete(scope.$index, scope.row)">Delete</el-button> -->
       </template>
     </el-table-column>
   </el-table>
   <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-size="pagesize"
        layout="total, prev, pager, next"
        :total='total'>
      </el-pagination>
  </div>


</template>

<script>

  export default {
    data() {

      // const item = {
      //   date: '2016-05-02',
      //   name: '王小虎',
      //   address: '上海市普陀区金沙江路 1518 弄'
      // };
      return {
          total:null,
          currentPage1:1,
          pagesize:10,
          tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄',
            id:1,
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄',
            id:2,
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄',
            id:3,
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄',
            id:4,
          }],
         loading:true,
          search: ''
        }
      },
    created(){
           // console.log(this);
           // console.log(this._data);
           this.getnewslist(this.currentPage1,this.pagesize);

        },
        methods: {
          getnewslist(currentPage1,pagesize){
            this.$axios.post(process.env.API_HOST+"/houtai/index/userkeylist",{page:currentPage1,pagesize:pagesize}).then(res=>{
              if(res.status===200){
                 //console.log("ss");
                console.log(res.data);
                this.total=res.data.max;
                this.tableData=res.data.context;
                this.loading=false;

              }
            }, res => {
    // 错误回调
                       console.log(res);



                 }
            );


          },


              handleEdit(index, row) {
                //利用row得到id
                //console.log(index, row);
                  this.$router.push({path:'/userkey/userkeysup',query:{userkeymsg:row}});


              },
              handleDelete(index, row) {
                this.$axios.post("/api/houtai/index/admindel",{id:row.user_id}).then(res=>{
                          if(res.status===200){
                             //console.log("ss");
                           // console.log(res.data);
                           this.open3(res.data.msg);
                            this.getnewslist(this.currentPage1,this.pagesize);

                          }
                        }, res => {
                // 错误回调
                                   console.log(res);



                             }
                        );

              } ,

      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },

      handleCurrentChange(val) {
        this.getnewslist(val,this.pagesize);
        console.log(`当前页: ${val}`);
      },
      open3(msg) {
             this.$message({
               message: msg,
               type: 'warning'
             });
           },

    },

    }

</script>

<style>
</style>
